<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/lib/echarts-3.3.1/echarts.js"></script>

</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>
  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li><a href="device-topology.html"><i class="icon-direction"></i><span>设备拓扑图</span></a></li>
      <li class="active"><a href="device-list.html"><i class="icon-table"></i><span>设备列表</span></a></li>
    </ul>
  </div>
  <div class="sys-main" id="sys-main">
    <div class="sys-title"><h2>设备列表</h2></div>

    <div class="sys-content">

      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">
            <h3>设备列表</h3>
            <label>探针设备 <em>13/15</em></label><label class="label">脱敏设备 <em>2/3</em></label><label>运维设备 <em>3/3</em></label>
          </div>

          <div class="btnbar"> <button class="btn btn-8" id="add">添加设备</button></div>

          <div class="filter">
            <select><option>设备类型</option></select>
            <select><option>设备状态</option></select>
            <div class="fm-group"><select><option>设备名称</option><option>设备编号</option><option>设备位置</option><option>管理员</option></select>
              <input type="text" placeholder="请输入关键词查询">
            </div>
            <button class="btn">检索</button>
          </div>

        </div>
        <div class="panel-body">
          <table  class="table table-striped">
            <thead>
              <tr>
                <th width="50" class="no-sort"><input type="checkbox"></th>
                <th>设备编号</th>
                <th>设备名称</th>
                <th>设备类型</th>
                <th>IP地址</th>
                <th>位置</th>
                <th>管理员</th>
                <th>联系电话</th>
                <th class="no-sort">操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><input type="checkbox"></td>
                <td>010014</td>
                <td><a href="javascript:void(0);">脱敏设备14</a></td>
                <td>脱敏设备</td>
                <td>172.1.23.125</td>
                <td>中心机房A区</td>
                <td>李云鹏</td>
                <td>0871-64150217</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>010013</td>
                <td><a href="javascript:void(0);">脱敏设备13</a></td>
                <td>脱敏设备</td>
                <td>172.1.23.21</td>
                <td>中心机房A区</td>
                <td>李云鹏</td>
                <td>0871-64150217</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>010012</td>
                <td><a href="javascript:void(0);">脱敏设备12</a></td>
                <td>脱敏设备</td>
                <td>172.1.23.211</td>
                <td>中心机房A区</td>
                <td>李云鹏</td>
                <td>0871-64150217</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>010011</td>
                <td><a href="javascript:void(0);">脱敏设备11</a></td>
                <td>脱敏设备</td>
                <td>172.1.23.122</td>
                <td>中心机房A区</td>
                <td>李云鹏</td>
                <td>0871-64150217</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>010010</td>
                <td><a href="javascript:void(0);">脱敏设备10</a></td>
                <td>脱敏设备</td>
                <td>172.1.23.23</td>
                <td>中心机房A区</td>
                <td>李云鹏</td>
                <td>0871-64150217</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>020007</td>
                <td><a href="javascript:void(0);">探针设备7</a></td>
                <td>探针设备</td>
                <td>172.1.23.55</td>
                <td>中心机房B区</td>
                <td>黄大炜</td>
                <td>0871-64524123</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>020006</td>
                <td><a href="javascript:void(0);">探针设备6</a></td>
                <td>探针设备</td>
                <td>172.1.23.22</td>
                <td>中心机房B区</td>
                <td>黄大炜</td>
                <td>0871-64524123</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>020005</td>
                <td><a href="javascript:void(0);">探针设备5</a></td>
                <td>探针设备</td>
                <td>172.1.23.211</td>
                <td>中心机房B区</td>
                <td>黄大炜</td>
                <td>0871-64524123</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>020004</td>
                <td><a href="javascript:void(0);">探针设备4</a></td>
                <td>探针设备</td>
                <td>172.1.23.122</td>
                <td>中心机房B区</td>
                <td>黄大炜</td>
                <td>0871-64524123</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>020003</td>
                <td><a href="javascript:void(0);">探针设备3</a></td>
                <td>探针设备</td>
                <td>172.1.23.23</td>
                <td>中心机房B区</td>
                <td>黄大炜</td>
                <td>0871-64524123</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>020002</td>
                <td><a href="javascript:void(0);">探针设备2</a></td>
                <td>探针设备</td>
                <td>172.1.23.58</td>
                <td>中心机房B区</td>
                <td>黄大炜</td>
                <td>0871-64524123</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>020001</td>
                <td><a href="javascript:void(0);">探针设备1</a></td>
                <td>探针设备</td>
                <td>172.1.23.24</td>
                <td>中心机房B区</td>
                <td>黄大炜</td>
                <td>0871-64524123</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>030003</td>
                <td><a href="javascript:void(0);">运维设备3</a></td>
                <td>运维设备</td>
                <td>172.1.23.211</td>
                <td>中心机房C区</td>
                <td>张军</td>
                <td>0871-64529191</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>030002</td>
                <td><a href="javascript:void(0);">运维设备2</a></td>
                <td>运维设备</td>
                <td>172.1.23.122</td>
                <td>中心机房C区</td>
                <td>张军</td>
                <td>0871-64529191</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
              <tr>
                <td><input type="checkbox"></td>
                <td>030001</td>
                <td><a href="javascript:void(0);">运维设备1</a></td>
                <td>运维设备</td>
                <td>172.1.23.23</td>
                <td>中心机房C区</td>
                <td>张军</td>
                <td>0871-64529191</td>
                <td class="icons"><a href="javascript:void(0);"><i class="icon-setting" title="配置"></i></a><a href="javascript:void(0);"><i class="icon-delete" title="删除"></i></a></td>
              </tr>
            </tbody>
          </table>
        </div><!--panel-body end-->
        <div class="panel-foot">
          <div class="btns"><button class="btn btn-minor" id="delbtn">批量删除</button></div>
          <div class="page">
            <ul class="pagination">
              <li class="disabled"><a href="javascript:void(0);">&lt;</a></li>
              <li class="active"><a href="javascript:void(0);">1</a></li>
              <li><a href="javascript:void(0);">2</a></li>
              <li><a href="javascript:void(0);">3</a></li>
              <li><a href="javascript:void(0);">4</a></li>
              <li><a href="javascript:void(0);">5</a></li>
              <li><a href="javascript:void(0);">&gt;</a></li>
              <li class="go"><input type="text" title="输入页码跳转"></li>
            </ul>
          </div>
        </div><!--panel-foot end-->
      </div>
    </div>
  </div>


  <div class="dialog dialog-sm" id="adddialog">
    <div class="dialog-win">
      <div class="dialog-head"><span id="etit">添加设备</span><a class="close" href="javascript:void(0)"><i class="icon-close"></i></a></div>
      <div class="dialog-body">

        <div class="form-box">
          <div class="form-item">
            <div class="form-title"><!-- <em class="fc-danger">*</em> -->设备类型：</div>
            <div class="form-content">
              <select>
                <option value="-1">请选择</option>
                <option>探针设备</option>
                <option>脱敏设备</option>
                <option>运维设备</option>
              </select>
            </div>
          </div>

          <div class="form-item">
            <div class="form-title">设备名称：</div>
            <div class="form-content"><input id="e1" class="input" value="" type="text"></div>
          </div>
          <div class="form-item">
            <div class="form-title">IP地址：</div>
            <div class="form-content"><input id="e2"  class="input" value="" type="text"></div>
          </div>

          <div class="form-item">
            <div class="form-title">位置：</div>
            <div class="form-content"><input id="e3"  class="input" value="" type="text"></div>
          </div>

          <div class="form-item">
            <div class="form-title">登录用户名：</div>
            <div class="form-content"><input id="e4"  class="input" value="" type="text"></div>
          </div>
          <div class="form-item">
            <div class="form-title">登录密码：</div>
            <div class="form-content"><input  class="input" type="text"></div>
          </div>

          <div class="form-item">
            <div class="form-title">管理员：</div>
            <div class="form-content"><input  id="e5" class="input" value="" type="text"></div>
          </div>
          <div class="form-item">
            <div class="form-title">联系方式：</div>
            <div class="form-content"><input  id="e6" class="input" id="lat" type="text"></div>
          </div>
        </div>
      </div>

      <div class="dialog-foot"><button class="btn" id="save">确认</button><button id="cancel" class="btn btn-minor">取消</button></div>

    </div>
  </div>
  <!--dialog end-->

  <div class="dialog dialog-xs" id="delete">
    <div class="dialog-win">
      <div class="dialog-head"><span>删除确认</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
      <div class="dialog-body">
        <div class="msg fc-danger">删除后不可恢复，确定要删除吗？</div>
      </div>
      <div class="dialog-foot"><button class="btn" id="save">确认</button><button id="cancel" class="btn btn-minor">取消</button></div>
    </div>
  </div>
  <!--dialog end-->
</body>
</html>

<script type="text/javascript">
  $(document).ready(function(){
    $("#add").on("click",function(){
      $(".table tr").removeClass('active');
      $("#etit").html("添加设备");
      $(".dialog input").val("")
      $("#adddialog").show()
    })

    $(".dialog .close,#cancel").on("click",function(){
      $(".dialog").hide();
    })

    $("#save").on("click",function(){
      $(".dialog-body").html("<p class='msg'>设备认证中，请耐心等待......</p>")
      setTimeout(function(){
        $(".dialog-body").html("<p class='msg  fc-success'>设备添加成功</p>")
      },1000);
    })

    $("#delbtn").on("click",function(){
//alert($('.table tbody tr td:eq(0) input[type=checkbox]').length)

      if($('.table tbody input[type=checkbox]').is(':checked')) {
         $("#delete").find(".dialog-body").html("<div class='msg fc-danger'>删除后不可恢复，确定要删除吗？</div>");
        $("#delete").show();
      } else {
        $("#delete").find(".dialog-body").html("<p class='msg fc-danger'>你没有选中记录</p>");
        $("#delete").show();
      }
    })

    $(".table tr").on("click", "td:eq(2) a", function() {
      var obj=$(this).parents("tr");
      obj.siblings().removeClass("active").end().addClass('active');
      $("#etit").html("修改设备信息");
      $("#e1").val($(this).html());
      $("#e2").val(obj.find("td:eq(4)").html());
      $("#e3").val(obj.find("td:eq(5)").html());
      $("#e4").val(obj.find("td:eq(6)").html());
      $("#e5").val(obj.find("td:eq(6)").html());
      $("#e6").val(obj.find("td:eq(7)").html());
      $("#adddialog").show()
    });

  })
</script>